<template>
<div>
  <el-drawer
    title="商品参数编辑"
    :visible="drawer"
    :before-close="closeDrawerOut"
    size="50%"
  >
    <div style="padding: 30px">
      <el-form ref="argsForm" :model="argsData" size="medium" label-width="100px"
               label-position="left">
        <el-form-item label="参数名" prop="argName">
          <el-input v-model="argsData.argName" placeholder="请输入参数名" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
      </el-form>

      <div>

        <el-button @click="innerDrawer = true">点击添加属性</el-button><br />
        <el-table v-if="properties.length !== 0" :data="properties">
          <el-table-column property="name" label="属性名" width="150"></el-table-column>
          <el-table-column property="price" label="价格" width="200"></el-table-column>
          <el-table-column property="stock" label="总数量"></el-table-column>
          <el-table-column property="description" label="描述" :show-overflow-tooltip="true"></el-table-column>
        </el-table>
        <div class="demo-drawer__footer" style="margin-top: 30px">
          <el-button @click="closeArgs">取 消</el-button>
          <el-button type="primary" @click="submitArgs">提交</el-button>
        </div>

        <el-drawer
          title="请输入参数的属性"
          :append-to-body="true"
          :visible.sync="innerDrawer"
          :before-close="closeDrawer"
          direction="rtl"
          ref="drawer"
        >
          <div style="padding: 30px">
            <el-form :model="form">
              <el-form-item label="属性名" >
                <el-input v-model="form.name" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="价格">
                <el-input v-model="form.price" placeholder="请输入价格" clearable :style="{width: '100%'}">
                  <template slot="prepend">￥</template>
                </el-input>
              </el-form-item>
              <el-form-item label="总数量">
                <el-input-number v-model="form.stock" placeholder="库存" controls-position=right>
                </el-input-number>
              </el-form-item>
              <el-form-item label="商品图片">
                <image-upload v-model="form.image"/>
              </el-form-item>
              <el-form-item label="描述">
                <el-input v-model="form.description" type="textarea" placeholder="请输入属性描述"
                          :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-form>
            <div class="demo-drawer__footer">
              <el-button @click="closeProperty">取 消</el-button>
              <el-button type="primary" @click="submitProperty">提交</el-button>
            </div>
          </div>
        </el-drawer>
      </div>
    </div>

  </el-drawer>
</div>
</template>

<script>
export default {
  name: "editArgs",
  props: ['drawer'],
  data() {
    return {
      // 参数页

      innerDrawer: false, // 控制内层抽屉
      argsData: {
        argName: '',// 参数名
        allProperty: [],// 属性列表
      },       // 抽屉中的表单数据
      form: {},           // 内层抽屉中的数据
      properties: [],     // 存放参数的所有属性
      productArgs: [],    // 存放商品的所有参数
    }
  },
  methods: {

    // 关闭内层抽屉
    closeDrawer(done) {
      this.$confirm('还有未保存的工作哦确定关闭吗？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    // 关闭外层
    closeDrawerOut() {
      this.$confirm('还有未保存的工作哦确定关闭吗？')
        .then(_ => {
          this.$emit("closeArgsDrawer");
        })
        .catch(_ => {});
    },
    // 关闭内层抽屉的属性编辑
    closeProperty() {
      this.innerDrawer = false;
      this.form = {};
    },
    // 提交内层抽屉的属性的值
    submitProperty() {
      this.properties.push(this.form);
      this.innerDrawer = false;
      this.form = {};
    },
    // 关闭外层抽屉的参数编辑
    closeArgs() {
      this.argsData.argName = '';
      this.argsData.allProperty = [];
      this.$emit("closeArgsDrawer");
    },
    // 提交外层抽屉的参数的值
    submitArgs() {
      this.argsData.allProperty = this.properties;
      let argsData = {
        argName: this.argsData.argName,
        allProperty: this.argsData.allProperty,
      }
      this.productArgs.push(argsData);

      this.$emit("toApp", this.productArgs);

      this.argsData.argName = '';
      this.argsData.allProperty = [];
      this.properties = [];
      this.productArgs = [];
    },
  }
}
</script>

<style scoped>

</style>
